<template>
    <div class="container">
        <view-box ref="viewBox">
            <flexbox orient="vertical">

                <flexbox-item>
                    <div class="banner">
                        <div class="bg-banner"></div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="title">品牌支持</div>
                        <div class="content">
                            共享品牌资源，阿噹共享汽车是中国互联网共享连锁租车领先品牌，加盟商获得品牌授权，在门店及各项经营用品上有权使用阿噹共享汽车确认的带有阿噹共享汽车logo的标识，大大提高加盟商在当地的业务竞争力。
                        </div>
                    </div>

                    <div class="text-box">
                        <div class="title">金融支持</div>
                        <div class="content">
                            加盟商可以共享阿噹共享汽车在金融市场的优势，低首付，按月还款，做大生意不再受资金的困扰。
                        </div>
                    </div>

                    <div class="text-box">
                        <div class="title">采购支持</div>
                        <div class="content">
                            持续批量采购，与众多车商建立了良好稳定的合作关系，采购最低可享受75折优惠，拥有以更低价格获得车辆的购买优势。
                        </div>
                    </div>

                    <div class="text-box">
                        <div class="title">技术支持</div>
                        <div class="content">
                            超过100000人同时在线，可管理10万车辆的系统平台，线上线下的联动优势，客户可随时通过手机微信进行租车。
                        </div>
                    </div>

                    <div class="text-box">
                        <div class="title">风控指导支持</div>
                        <div class="content">
                            专属的法务团队，专业的事故保险处理，强大的车辆追踪和收回体系，防止车辆丢失，提高经营资产安全性，稳定经营。
                        </div>
                    </div>

                    <div class="text-box">
                        <div class="title">培训支持</div>
                        <div class="content">
                            阿噹共享汽车会提供专业的业务培训帮助加盟商快速开展业务。
                        </div>
                    </div>

                    <div class="text-box">
                        <div class="title">管理支持</div>
                        <div class="content">
                            提供加盟店标准化管理规范指导，专属网店经理参与加盟店日常管理，指导加盟店参加促销活动和价格调整，保持稳定的出租率。
                        </div>
                    </div>

                    <div class="text-box">
                        <div class="title">推广管理服务支持</div>
                        <div class="content">
                            包括主流搜索引擎及分类信息网，并涉及主流门户网站，进行全国性推广，涵盖PC端和移动端，以提高加盟店在官网和微信上的宣传和车辆预定。
                        </div>
                    </div>

                </flexbox-item>



                <flexbox-item>
                    <div class="jmsq">
                        <span>加盟申请</span>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="form">
                        <x-input title="姓名" name="realName" is-type="china-name"></x-input>
                        <x-input title="手机" name="mobile" is-type="china-mobile"></x-input>
                        <x-input title="地址" name="address"></x-input>
                        <x-input title="邮箱" name="email" is-type="email"></x-input>
                        <x-input title="留言" name="message"></x-input>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="submit">
                        <x-button :gradients="['#eb5d11', '#eb5d11']">提交申请</x-button>
                    </div>
                </flexbox-item>

            </flexbox>
        </view-box>
    </div>
</template>

<script>
    import { ViewBox, Scroller, Swiper, Flexbox, FlexboxItem, XInput, XButton } from 'vux'

    export default {
        name: 'Qc8dzc',
        components: {
            ViewBox,
            Scroller,
            Swiper,
            Flexbox,
            FlexboxItem,
            XInput,
            XButton
        },
        data() {
            return {
            }
        },
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .banner{
        height: 180px;
        display: block;
        .bg-banner{
            width: 100%;
            height: 100%;
            background: url("../../assets/swiper/swiper3.png") center center no-repeat;
            background-size: cover;
        }
    }
    .text-box{
        padding: 0 20px;
        margin-top: 20px;
        .title{
            text-align: left;
            color: #eb5d11;
            font-size: 18px;
            font-weight: bold;
            border: 1px solid #eb5d11;
            border-radius: 5px;
            box-shadow: 0px 0px 3px 3px #ffe4c6;
            display: inline-block;
            padding: 3px 10px;
        }
        .content{
            color: #666666;
            font-size: 12px;
            padding-top: 10px;
        }
    }

    .jmsq{
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
        span{
            display: inline-block;
            line-height: 40px;
            font-size: 22px;
            font-weight: bold;
            color: #eb5d11;
            border: 1px solid #eb5d11;
            width: 100%;
            border-radius: 5px;
            box-shadow: 0px 0px 20px #fef2ea;
        }
    }
    .form {
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
        .weui-cell {
            padding-left: 0;

        }
    }
    .submit{
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
    }
</style>